<template>
	<view>
		<view class="bigbox">
			<view class="header">
				<view class="jiantouhezi" @click="navigateToShop">
					<text class="jiantou"></text>
				</view>
				<view class="dingbu">
					<view class="soucang" @click="jyd"></view>
					<text class="zhuanfa"></text>
				</view>
			</view>
			<view class="uni-margin-wrap">
				<u-popup :show="sharePopup" mode="bottom" @close="closeShare">
					<share></share>
				</u-popup>
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in img" :key="index">
						<image class="swiper-item" :src="item"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="xinxi">
				<text class="price">{{ product.attributes.price }}</text>
				<view class="tags">
					<text class="tag">店铺新人券</text>
					<text class="tag">满25减2</text>
					<text class="tag">红包{{quan}}元券</text>
				</view>
				<text class="description">{{ product.description }}</text>
				<view class="sold-info">
					<text>已售{{ sold }}</text>
					<text> | {{ peopleInCart }}人加购</text>
				</view>
			</view>
			<view class="new-box">
				<view class="protection">
					<text class="protection-title">新客保障</text>
					<text class="protection-desc">新客专享退货包运费・极速退款</text>
				</view>
				<view class="details">
					<view class="row">
						<text class="label">保障</text>
						<text class="value">升级版退货包运费・升级版极速退款・7天无理由</text>
					</view>
					<view class="row">
						<text class="label">已选</text>
						<text class="value">{{guige}}</text>
					</view>
					<view class="row">
						<image src="/path/to/your/image.jpg" class="product-image" />
						<text class="value">共8种颜色分类可选</text>
					</view>
					<view class="row">
						<text class="label">发货</text>
						<text class="value">现货 48小时内从河北廊坊发货 | 包邮</text>
					</view>
				</view>
			</view>
			<view class="pinjia" @click="navigateTol">
				<view class="touxiang1">
					<text>商品评价（{{ reviews }}）</text>
				</view>
				<view class="touxiang">
					<image class="yhtx" :src="imageUrl1"></image>
					<view class="yhxm">{{username}}</view>
				</view>
				<text class="pinjia-content">{{ text }}</text>
			</view>
		</view>
		<view class="dibu">
			<view class="dibu-left">
				<view class="icon-wrapper" @click="navigateToShop">
					<text class="dianpu iconfont"></text>
					<text>店铺</text>
				</view>
				<view class="icon-wrapper" @click="contactCustomerService">
					<text class="kefu iconfont"></text>
					<text>客服</text>
				</view>
				<view class="icon-wrapper" @click="navigateToCart">
					<text class="gouwuche iconfont"></text>
					<text>购物车</text>
				</view>
			</view>
			<view class="dibu-right">
				<view class="button-wrapper join-cart " @click="addToCart">
					<text>加入购物车</text>
				</view>
				<view class="button-wrapper buy-now" @click="gomai">
					<text>立即购买</text>
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close">
			<view class="goumai">
				<view class="product-info">
					<image :src="imageUrl2" class="product-image" />
					<view class="product-details">
						<text class="price">${{product.attributes.price}}</text>
						<text class="coupon">平台红包{{quan}}元券</text>
						<view class="service">
							<text class="service-item">升级版退货包运费</text>
							<text class="service-item">7天无理由退货</text>
							<text class="service-item">升级版极...</text>
						</view>
					</view>
					<text class="close" @click="closePopup">×</text>
				</view>
				<!-- 款式 -->
				<view class="style-section">
					<text class="section-title">款式</text>
					<view class="style-options">
						<view class="style-option" @click="siuub(index)" v-for="(item,index) in syle" :key="index">
							{{item.productSpec}}
						</view>
					</view>
				</view>
				<view class="queding">
					<text class="dibuqueding" @click="">确定</text>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<u-notify :message="massage" :show="showchengg" top="1000rpx"></u-notify>
	</view>
</template>

<script>
	import share from '@/pages/My/components/share.vue'
	export default {
		data() {
			return {
				llll: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				price: '30元',
				// text: '杜杜u杜杜嘟嘟嘟u杜杜嘟嘟嘟u嘟嘟嘟u杜杜u的',
				// pinjia: '杜杜杜杜杜杜杜杜杜杜',
				imageUrl1: '',
				imageUrl2: '',
				// imageUrl3: '',
				// imageUrl4: '',
				product: {},
				shuliang: 0,
				sold: 109,
				peopleInCart: 200,
				// username: '杜永杰',
				quan: 30,
				show: false,
				kuanshi: [],
				productId: null,
				syle: [],
				guige: "",
				img: [],
				reviews:null,
				gouwu: {
					userId: this.userId = uni.getStorageSync('id'),
					productId: null,
					quantity: 1
				},
				jydh: {
					userId: this.userId = uni.getStorageSync('id'),
					productId: 2
				},
				sharePopup: false,
				showchengg: true,
				massage:"加入购物车成功"
			};
		},
		onLoad(e) {
			// console.log(e);
			this.productId = e.productId ,
			this.gouwu.productId = e.productId ,
			this.jydh.productId = e.productId,
			// this.userId=uni.getStorageSync('id');

			// this.userId = getStorageSync("7"),
			this.request("/product/details", "get", {
				productId: Number(this.productId)
			}).then(
				(res) => {
					console.log(res);
					this.product = res.data.result.product;
					this.img = res.data.result.product.image;
					this.text = res.data.result.reviewText;
					this.imageUrl1 = res.data.result.profilePrcture;
					this.username = res.data.result.username;
					this.imageUrl2 = res.data.result.product.image[0];
				}).catch((err) => {
				console.log(err);
			}),
			this.request("/productReviews/getParentReviewsCount", "get", {
					productId: this.productId
				}).then((res) => {
					console.log(res);
						this.reviews = res.data.result;
				}).catch((err) => {
					console.error(err);
				});
		},
		// fetchReviews() {
		// 	this.request("/productReviews/getParentReviewsCount", "get", {
		// 			// productId: this.productId
		// 		}).then((res) => {
		// 			if (res.data.message=="操作成功！") {
		// 				this.reviews = res.data.result;
		// 			}
		// 		})
		// 		.catch((err) => {
		// 			console.error(err);
		// 		});
		// },
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
		},
		methods: {
			navigateToCart() {
				uni.navigateTo({
					url: '/pages/Productdetails/Cart'
				});
			},
			goShare() {
				this.sharePopup = !this.sharePopup
			},
			navigateTol() {
				uni.navigateTo({
					url: '/pages/Productreview/review?productId='+this.productId
				});
			},
			navigateToShop() {
				uni.navigateBack({
					delta: 1
				});
			},
			contactCustomerService() {
				// Logic to contact customer service
			},
			addToCart() {
				this.showchengg=true;
				this.request("/InsertCarService/InsertProductFavori", "post", this.gouwu)
					.then((res) => {
						console.log(res);
						if(res.data.message=="添加成功"){
							// this.showchengg=true;
							uni.navigateTo({
								url:"/pages/Productdetails/Cart"
							})
							
						}else{
							this.massage="添加失败";
							this.showchengg=true;
						}
						// Handle the response as needed
					})
					.catch((err) => {
						console.log(err);
					});
					

			},

			jyd() {
				this.request("/InsertProductFavoritesService/InsertProductFavori", "post", this.jydh)
					.then((res) => {
						console.log(res);
						if(res.data.message="添加成功"){
							uni.navigateTo({
								url:"/pages/searchBox/Wishlist"
							})
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			buyNow() {
				// Logic to buy now
			},
			changeIndicatorDots() {
				this.indicatorDots = !this.indicatorDots;
			},
			changeAutoplay() {
				this.autoplay = !this.autoplay;
			},
			// intervalChange(e) {
			// 	this.interval = e.target.value;
			// },
			durationChange(e) {
				this.duration = e.target.value;
			},
			close() {
				this.show = false;
				this.closePopup = false;
			},
			closePopup() {
				this.show = false;
			},
			closeShare() {
				this.sharePopup = !this.sharePopup
			},
			gomai() {
				// this.show = true;
				// this.request("/priducts/getPriducts", "get", {
				// 	merchantId: this.product.merchanId
				// }).then((res) => {
				// 	console.log(res);
				// 	this.syle = res.data.result;
				// })
				
				uni.navigateTo({
					url:"/pages/payment/payment?productId="+this.productId
				})
			},
			siuub(e) {
				this.product.attributes.price = this.syle[e].productPrice;
				this.imageUrl2 = this.syle[e].productImage;
				this.guige = this.syle[e].productSpec;
			}
		},
	};
</script>

<style scoped>
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}

	.dibuqueding {
		margin: auto;
		color: #f5f5f5;
	}

	.queding {
		width: 100%;
		height: 80rpx;
		background-color: #ff2727;
		display: flex;
		border-radius: 50rpx;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}

	.container {
		padding: 20px;
	}

	.product-info {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding-bottom: 10px;
		position: relative;
	}

	.image {
		width: 80px;
		height: 80rpx;
	}

	.product-details {
		flex: 1;
		margin-left: 10px;
	}

	.price {
		font-size: 24px;
		color: #ff0000;
	}

	.coupon {
		color: #ff0000;
		margin-top: 5px;
	}

	.service {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.service-item {
		background: #f3f3f3;
		padding: 5px 10px;
		margin: 5px;
		border-radius: 5px;
	}

	.close {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		cursor: pointer;
	}

	.style-options {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.style-option {
		background-color: #f5f5f5;
		padding: 10px;
		margin-right: 5px;
		border-radius: 5px;
		font-size: 14px;
		cursor: pointer;
	}

	.style-option:hover {
		background-color: red;
	}

	.package-options {
		display: flex;
		flex-wrap: wrap;
		margin: 20px 0;
	}

	.option {
		padding: 10px 20px;
		background: #f3f3f3;
		margin: 5px;
		border-radius: 5px;
		cursor: pointer;
	}

	.option.active {
		border: 1px solid #ff0000;
	}

	.quantity {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px 0;
	}

	.quantity text {
		padding: 0 20px;
		font-size: 18px;
		cursor: pointer;
	}

	.buy-now {
		width: 100%;
		padding: 10px 0;
		background: #ff0000;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		font-size: 18px;
	}

	.uni-margin-wrap,
	.swiper {
		width: 100%;
		height: 600rpx;
	}

	.goumai {
		width: 100%;
		height: 1150rpx;
		/* background-color: pink; */
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		background-size: cover;
		background-position: center;
	}

	.pinjia {
		width: 100%;
		height: 300rpx;
		margin: 10rpx auto;
		padding: 2px;
		border: 0.5px solid #f0f0f0;
		border-radius: 20px;
		background-color: #fff;
	}

	.touxiang {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.yhtx {
		width: 50rpx;
		height: 50rpx;
		background-size: cover;
		background-position: center;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.yhxm {
		font-size: 28rpx;
		color: #333;
	}

	.pinjia-content {
		font-size: 26rpx;
		color: #666;
	}

	.jiantouhezi {
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(65, 65, 65, 0.4);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jiantou::before,
	.sousuo::before,
	.soucang::before,
	.zhuanfa::before,
	.dianpu::before,
	.kefu::before,
	.gouwuche::before {
		font-family: "iconfont" !important;
		font-size: 50rpx;
	}

	.jiantou::before {
		content: "\e64e";
		color: black;
	}

	.sousuo::before,
	.soucang::before,
	.zhuanfa::before {
		color: black;
	}

	.soucang::before {
		display: block;
		content: "\e8b9";
	}

	.zhuanfa::before {
		content: "\e624";
	}

	.dianpu::before {
		content: "\e622";
	}

	.kefu::before {
		content: "\e60a";
	}

	.gouwuche::before {
		content: "\e652";
	}

	.bigbox {
		width: 100%;
		height: 1800rpx;
		display: flex;
		flex-direction: column;
		background-color: rgb(250, 250, 250);
	}

	.header {
		/* background-color: #aaff00; */
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dingbu {
		display: flex;

		align-items: center;
		justify-content: space-between;
		width: 150rpx;
	}

	.xinxi {
		width: 98%;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 10rpx;
	}

	.price {
		font-size: 32rpx;
		color: #f40;
		font-weight: bold;
	}

	.tags {
		display: flex;
		gap: 10rpx;
	}

	.tag {
		background-color: rgb(255, 255, 255);
		color: rgb(255, 49, 49);
		border: 1rpx solid rgb(255, 49, 49);
		border-radius: 10rpx;
		padding: 5rpx;
	}

	.description {
		font-size: 28rpx;
		color: #666;
		margin: 10rpx 0;
	}

	.sold-info {
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.new-box {
		width: 98%;
		background-color: #fff;
		margin: 10rpx auto;
		padding: 10rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 10rpx;
	}

	.protection {
		margin-bottom: 20rpx;
	}

	.protection-title {
		font-size: 28rpx;
		color: #333;
	}

	.protection-desc {
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.details .row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
	}

	.value {
		font-size: 28rpx;
		color: #666;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
	}

	.dibu {
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}

	.dibu-left {
		display: flex;
		gap: 20rpx;
		padding-left: 10rpx;
	}

	.icon-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5rpx;
	}

	.dibu-right {
		display: flex;
		gap: 10rpx;
		padding-right: 20rpx;
	}

	.button-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		/* height: 100%; */
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.join-cart {
		background-color: rgb(255, 255, 255);
		color: rgb(255, 49, 49);
		border: 1rpx solid rgb(255, 49, 49);
	}

	.buy-now {
		background-color: rgb(255, 49, 49);
		color: rgb(255, 255, 255);
	}
</style>